<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-type-contents3 page-prep-dataflow">
  <!-- top -->
  <div class="ddp-top-flow">
    <!-- navi wrap -->
    <div class="ddp-wrap-naviarea ddp-editnavi ddp-clear">
      <em class="ddp-icon-dataset2"></em>
      <div class="ddp-ui-naviarea">
        <!-- name -->
        <!-- 클릭시 ddp-selected 추가 -->
        <div class="ddp-wrap-naviname" [ngClass]="{'ddp-selected':isOtherDatasetListShow}" (click)="showDatasets()" (clickOutside)="isOtherDatasetListShow = false">
          <span class="ddp-data-naviname" title="{{dsName}}">
            {{dsName}}
            <em class="ddp-icon-menuview"></em>
          </span>
          <!-- popup -->
          <div class="ddp-wrap-popup2 ddp-type">
            <div class="ddp-ui-label ">
              {{'msg.dp.ui.num.ds.flow' | translate : {value:dataflow?.wrangledDsCount} }}
            </div>

            <ul class="ddp-list-popup ddp-list-dataset">
              <li [ngClass]="{'ddp-selected': dataset.current}" *ngFor="let dataset of filteredWrangledDatasets">
                <a href="javascript:" (click)="changeWrangledDataset(dataset)">
                  <em class="ddp-icon-dataset3"></em>
                  <span class="ddp-data-name" title="{{dataset.dsName}}">
                    {{dataset.dsName}}
                  </span>
                </a>
              </li>
            </ul>
          </div>
          <!-- //popup -->
        </div>
        <!-- //name -->
      </div>
      <div class="ddp-ui-navibuttons">
        <a href="javascript:" class="ddp-btn-buttons2" (click)="createSnapshot()"><em class="ddp-icon-shot"></em>{{'msg.dp.th.ss' | translate}}</a>
        <a href="javascript:" class="ddp-btn-line3" (click)="prev();"><em class="ddp-icon-btndone"></em>{{'msg.comm.btn.done' | translate}}</a>
      </div>
    </div>
    <!-- //navi wrap -->
  </div>

  <!-- //top -->
  <div class="ddp-wrap-flow" style="position:fixed; left:0; top:48px; bottom:0; right:0; box-sizing:border-box; overflow:hidden;">
    <div class="rule-top">
      <div class="left-component rule-left" style="float: left; height: 100%;">
        <div class="ddp-wrap-flow-grid" style="position:relative; top:0; left:0; right:0; min-height:100%;">
          <edit-rule-grid (selectHeader)="setRuleInfoFromGridHeader($event)"
                          (contextMenuItemInfo)="onContextMenuInfo($event)" [isAggregationIncluded]="isAggregationIncluded"></edit-rule-grid>
        </div>
      </div>
      <div class="right-component rule-right" style="float: left; height: 100%;">

        <!-- Rule list -->
        <app-rule-list [dsId]="dsId"
                       [ruleList]="ruleList"
                       [redoable]="redoable"
                       [undoable]="undoable"
                       (jumpEvent)="jump($event)"
                       (redoUndoEvent)="transformAction($event)"
                       (deleteEvent)="deleteRule($event)"
                       (editEvent)="setEditData($event)"
                       (addRuleEvent)="insertStep($event)"
                       (snapshotDetailEvent)="getSnapshotDetail($event)" (snapshotListJump)="useUnloadConfirm = true;">
        </app-rule-list>
        <!-- // Rule list -->

      </div>
    </div>
    <div class="bottom rule-bottom" >
      <!-- add rule -->
      <div class="ddp-wrap-addrule" style="position:relative; top:0; left:0; right:0; bottom:0; height:100%; min-height:inherit">
        <!-- 화면 클릭 오류로 인해 z-index를 임시로 설정함!!! 후에 정식으로 수정해야 함!! -->
        <div class="ddp-box-top" style="position:relative; top:0; left:0; right:0; bottom:0;z-index:10;">
          <!-- title -->
          <div class="ddp-box-title">
            <ng-container *ngIf="opString === 'UPDATE'">{{'msg.dp.ui.btn.edit.rule' | translate}}</ng-container>
            <ng-container *ngIf="opString !== 'UPDATE'">{{'msg.dp.ui.btn.add.rule' | translate}}</ng-container>
            <!--{{'msg.dp.ui.add.rule.title' | translate : {mode : opString !== 'UPDATE' ? 'Add' : 'Edit' } }}-->
            <a href="javascript:" class="ddp-link-switch" (click)="switchEditor()">{{editorUseLabel}}</a>
          </div>
          <!-- //title -->
          <!-- buttons -->
          <div class="ddp-ui-buttons">
            <a href="javascript:" class="ddp-btn-type3" (click)="jumpToCurrentIndex()">{{'msg.comm.btn.cancl' | translate}}</a>
            <a href="javascript:"
               [ngClass]="{'ddp-disabled': editorUseFlag ? inputRuleCmd === '' : ruleVO.command === '' }"
               class="ddp-btn-type4" (click)="addRule()">
               {{ opString !== 'UPDATE' ? ('msg.dp.btn.add' | translate) : ('msg.comm.btn.done2' | translate ) }}
            </a>
          </div>
          <!-- //buttons -->
        </div>
        <div class="ddp-wrap-rulecontents"
             [ngClass]="{'ddp-inherit': isCommandListShow || isFocus || isMultiColumnListShow || editorUseFlag }">
          <div class="ddp-box-contents ddp-clear" [style.left]="scrollLeft">
            <!-- editor -->
            <div class="ddp-wrap-switch-editor" *ngIf="editorUseFlag">
              <!-- switch 클릭시 ddp-box-full 추가 -->
              <div class="ddp-box-command ddp-box-full">
                <div class="ddp-ui-title">
                  {{'msg.dp.th.command' | translate}}
                </div>

                <!-- input -->
                <div class="ddp-wrap-datainput">
                  <input class="ddp-input-typebasic" placeholder="{{'msg.dp.alert.command.input.ph' | translate}}" [(ngModel)]="inputRuleCmd" >
                </div>
                <!-- //input -->
              </div>
            </div>
            <!-- //editor -->

            <!-- builder -->
            <div class="ddp-wrap-switch-builder" [ngStyle]="{'visibility':editorUseFlag ? 'hidden' : null }">
              <div class="ddp-box-command">
                <div class="ddp-ui-title">
                  {{'msg.dp.th.command' | translate}}
                </div>
                <!-- select box -->
                <!-- 클릭시 ddp-selected 추가 -->
                <div class="ddp-type-selectbox ddp-type-search-select"
                     tabindex="1"
                     [ngClass]="{'ddp-selected' : isCommandListShow }"
                     [class.ddp-result]="ruleVO.command"
                     (click)="$event.stopImmediatePropagation(); showCommandList()"
                     (keydown)="navigateWithKeyboardShortList($event, filteredCommandList, 'command')">
                  <!-- 선택시 자동 input display:block; -->
                  <input class="ddp-input-selectbox" placeholder="{{'msg.dp.th.command' | translate}}" [(ngModel)]="commandSearchText" id="commandSearch">
                  <span class="ddp-txt-selectbox" >{{ruleVO.command !== '' ?  ruleVO.command : 'msg.dp.ui.command.input.ph' | translate }}</span>
                  <ul class="ddp-list-selectbox ddp-list-command"
                      *ngIf="isCommandListShow"
                      (clickOutside)="isCommandListShow = false; initSelectedCommand(filteredCommandList)">
                    <li *ngFor="let command of filteredCommandList; let index = index;"
                        (click)="selectCommand($event, command)"
                        (mouseout)="commandListHover($event,index)"
                        (mouseover)="commandListHover($event,index)"
                        (mousemove)="flag === true ? flag = false : flag = true">
                      <a href="javascript:" [ngStyle]="command.isHover ? {'background-color': '#f6f6f7' }:{}">
                              <span class="ddp-ui-type">
                                <em class="ddp-ui-round">{{command.alias}}</em>{{command.command}}
                              </span>
                        <span class="ddp-ui-code">
                                {{command.desc}}
                              </span>
                      </a>
                    </li>
                    <li *ngIf="filteredCommandList.length ===0"><span class="ddp-noresult">{{'msg.dp.ui.search.no.rslt' | translate}}</span></li>
                  </ul>
                </div>
                <!-- //select box -->
              </div>
              <div class="ddp-wrap-part" *ngIf="'' !== ruleVO.command">

                <!--startHeader-->
                <edit-rule-header #editRule *ngIf="'header' === ruleVO.command" ></edit-rule-header>
                <!-- //endHeader-->

                <!--startKeep-->
                <edit-rule-keep #editRule *ngIf="'keep' === ruleVO.command"
                                (advancedEditorClickEvent)="openPopupFormulaInput($event)">
                </edit-rule-keep>
                <!-- //endKeep-->

                <!-- startReplace -->
                <edit-rule-replace #editRule *ngIf="'replace' === ruleVO.command"
                                   (advancedEditorClickEvent)="openPopupFormulaInput($event)">
                </edit-rule-replace>
                <!-- // endReplace -->

                <!-- startRename -->
                <edit-rule-rename #editRule *ngIf="'rename' === ruleVO.command"
                                  (onEvent)="onMultiColumnRenameClick()"></edit-rule-rename>
                <!-- // endRename -->

                <!--startSet-->
                <edit-rule-set #editRule *ngIf="'set' === ruleVO.command"
                               (advancedEditorClickEvent)="openPopupFormulaInput($event)">
                </edit-rule-set>
                <!--//endSet-->

                <!--startSettype-->
                <edit-rule-settype #editRule *ngIf="'settype' === ruleVO.command"></edit-rule-settype>
                <!--//endSettype-->

                <!--startCountpattern-->
                <edit-rule-countpattern #editRule *ngIf="'countpattern' === ruleVO.command"></edit-rule-countpattern>
                <!--//endCountpattern-->

                <!--startSplit-->
                <edit-rule-split #editRule *ngIf="'split'===ruleVO.command"></edit-rule-split>
                <!--//endSplit-->

                <!--startDerive-->
                <edit-rule-derive #editRule *ngIf="'derive' === ruleVO.command"
                                  (advancedEditorClickEvent)="openPopupFormulaInput($event)">
                </edit-rule-derive>
                <!--//endDerive-->

                <!--startDelete-->
                <edit-rule-delete #editRule *ngIf="'delete' === ruleVO.command"
                                  (advancedEditorClickEvent)="openPopupFormulaInput($event)">
                </edit-rule-delete>
                <!--//endDelete-->

                <!--startDrop-->
                <edit-rule-drop #editRule *ngIf="'drop' === ruleVO.command" ></edit-rule-drop>
                <!--//endDrop-->

                <!--startExtract-->
                <edit-rule-extract #editRule *ngIf="'extract'===ruleVO.command"></edit-rule-extract>
                <!--//endExtract-->

                <!--startFlatten-->
                <edit-rule-flatten #editRule *ngIf="'flatten' === ruleVO.command"></edit-rule-flatten>
                <!--//endFlatten-->

                <!--startMerge-->
                <edit-rule-merge #editRule *ngIf="'merge' === ruleVO.command"></edit-rule-merge>
                <!--//endMerge-->

                <!--startAggregate-->
                <edit-rule-aggregate #editRule *ngIf="'aggregate' === ruleVO.command"></edit-rule-aggregate>
                <!--//endAggregate-->

                <!--startSort-->
                <edit-rule-sort #editRule *ngIf="'sort' === ruleVO.command"></edit-rule-sort>
                <!--//endSort-->

                <!--startMove-->
                <edit-rule-move #editRule *ngIf="'move' === ruleVO.command"></edit-rule-move>
                <!--//endMove-->

                <!--start pivot -->
                <edit-rule-pivot #editRule *ngIf="'pivot' === ruleVO.command"></edit-rule-pivot>
                <!-- end pivot -->

                <!--start unpivot -->
                <edit-rule-unpivot #editRule *ngIf="'unpivot' === ruleVO.command"></edit-rule-unpivot>
                <!--//endUnpivot-->

                <!--startNest-->
                <edit-rule-nest #editRule *ngIf="'nest' === ruleVO.command"></edit-rule-nest>
                <!--//endNest-->

                <!--startUnnest-->
                <edit-rule-unnest #editRule *ngIf="'unnest' === ruleVO.command" [firstRow]="selectedDataSet.gridData.data?selectedDataSet.gridData.data[0]:null"></edit-rule-unnest>
                <!--//endUnnest-->

                <!--startSetformat-->
                <edit-rule-setformat #editRule *ngIf="'setformat' === ruleVO.command"></edit-rule-setformat>
                <!--endSetformat-->

                <!--startSetformat-->
                <edit-rule-window #editRule *ngIf="'window' === ruleVO.command"></edit-rule-window>
                <!--endSetformat-->
              </div>
            </div>
            <!-- //builder -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Snapshot create popup -->
<create-snapshot-popup (snapshotCreateFinishEvent)="initSnapshotList()"
                       (snapshotCloseEvent)="snapshotCreateClose($event)">
</create-snapshot-popup>
<!-- // Snapshot create popup -->


<!-- Join rule popup -->
<app-rule-join-popup [existingDataSet]="selectedDataSet"
                     [serverSyncIndex]="serverSyncIndex"
                     (joinComplete)="ruleJoinComplete($event);"
                     *ngIf="isRuleJoinModalShow"
                     [dfId]="dfId"
                     [rightDataset]="rightDataset"
                     [editRuleStr]="editJoinOrUnionRuleStr">
</app-rule-join-popup>
<!-- // Join rule popup -->

<!-- Union rule popup -->
<app-rule-union-popup [masterDataset]="selectedDataSet"
                      [serverSyncIndex]="serverSyncIndex"
                      [dfId]="dfId"
                      [editRuleStr]="editJoinOrUnionRuleStr"
                      (unionComplete)="ruleUnionComplete($event);"
                      *ngIf="isRuleUnionModalShow">
</app-rule-union-popup>
<!-- // Union rule popup -->

<!-- Advanced editor popup -->
<app-extend-input-formula (done)="doneInputFormula($event)"></app-extend-input-formula>
<!-- // Advanced editor popup -->


<!-- Snapshot detail popup -->
<app-data-snapshot-detail (snapshotDetailCloseEvent)="initSnapshotList()"
                          (navigateToDataflow)="prev()">
</app-data-snapshot-detail>
<!-- // Snapshot detail popup -->

<multiple-rename-popup (renameMultiColumns)="onRenameMultiColumns($event);"></multiple-rename-popup>
